<template>
    <div>
     <h1>职员信息列表展示</h1>
     <a href="/AddStaffView">职员信息录入</a>
     <br>
     <a href="https://localhost:7134/api/Staff/ExportLevelExcel">导出</a>
     <br>
     姓名：<input type="text" v-model="find.name">
     居民类型： <select v-model="find.stafftypeid">
                    <option value="0">请选择</option>
                    <option v-for="b in qwert" :value="b.staffTypeId">{{ b.name }}</option>
                 </select>
     <input type="button" value="查询" @click="Show">
     <table class="table">
        <thead>
            <tr>
              
                <td>姓名</td>
                 <td>性别</td>
                <td>身份证号</td>
                <td>手机号</td>
                <td>职员类型</td>
                <td>管理小区</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in data">
                <td>{{ a.name }}</td>
                 <td>{{a.sex?"男":"女"  }}</td>
                <td>{{a.staffCard  }}</td>
                <td>{{ a.phone.substring(0,3)+"****"+a.phone.substring(7) }}</td>
                <td>{{a.staffType  }}</td>
                <td>{{ a.addr }}</td>
                <td>操作</td>
                
            </tr>
        </tbody>
     </table>
     
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";

onMounted(()=>{
    Show()
})
const data=ref([{
      "id": 2,
    "name": "刘备",
    "sex": true,
    "staffCard": "166273884957483920",
    "phone": "15662777384",
    "addr": "景观学区",
    "staffTypeId": 3,
    "staffType": "普通职员"
}])
const Show=()=>{
    axios.get("https://localhost:7134/api/Staff/GetStaff",{params:find.value}).then(res=>{
        data.value=res.data
     
    })
}
 
   
const find=ref({
    name:"",
    stafftypeid:0,
 
})

onMounted(()=>{
    Xiala()
})
const qwert=ref([{
     "staffTypeId": 1,
    "name": "项目经理"
}])
const Xiala=()=>{
  axios.get("https://localhost:7134/api/Staff/Xialak").then(res=>{
    qwert.value=res.data
  })
}
</script>

<style scoped>

</style>